<template>
  <div>
    <el-menu-item v-if="item.children == null" :index="item.indexPath"><i :class="item.icon"></i>{{ item.title }}</el-menu-item>
    <el-submenu v-else :index="item.indexPath">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <!-- <el-menu-item v-for="subItem in item.children" :key="subItem.indexPath" :index="subItem.indexPath"><i :class="subItem.icon"></i>{{ subItem.title }}</el-menu-item> -->
      <sidebar v-for="subItem in item.children" :key="subItem.indexPath" :item="subItem" />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'sidebar',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

<style>

</style>